<template>
  <view class="page-tabbar">
    <wd-tabbar
      v-if="isTabbarPage"
      v-model="tabbarIndex"
      shape="round"
      bordered
      fixed
      placeholder
      safeAreaInsetBottom
      active-color="var(--primary-color)"
      inactive-color="var(--neutral-color-3)"
      @change="tabbarChange"
    >
      <wd-tabbar-item v-for="item in tabBarList" :key="item.text" :title="item.text" custom-class="page-tabbar-item">
        <template #icon="{ active }">
          <text v-if="active" :class="[item.selectedIconfont, 'text-xxl']" style="color: var(--primary-color)"></text>
          <text v-else :class="[item.iconfont, 'text-xxl']" style="color: var(--neutral-color-3)"></text>
        </template>
      </wd-tabbar-item>
    </wd-tabbar>
  </view>
</template>

<script setup>
import { ref, computed } from 'vue'
import { tabBarList } from './tabbar-list'
import { useGlobalStore } from '@/store/global'

const tabbarIndex = computed({
  set(newVal) {
    useGlobalStore().curTabbarIndex = newVal
  },
  get() {
    return useGlobalStore().curTabbarIndex
  }
})

const pages = getCurrentPages()
const curPage = pages[pages.length - 1]

const pagePath = computed(() => {
  let path = '/'
  // #ifndef MP-WEIXIN
  path = curPage.$page.path
  // #endif
  // #ifdef MP-WEIXIN
  path = '/' + curPage.route
  // #endif
  return path
})

const isTabbarPage = computed(() => {
  const tabIndex = tabBarList.findIndex((item) => item.pagePath === pagePath.value)
  return tabIndex !== -1
})

function tabbarChange(e) {
  const changePath = tabBarList[e.value].pagePath
  // 和当前页面路径对比，阻止重复跳转
  if (pagePath.value == changePath) return
  uni.switchTab({
    url: changePath
  })
}
</script>

<script>
export default {
  options: {
    addGlobalClass: true,
    virtualHost: true,
    styleIsolation: 'shared'
  }
}
</script>

<style lang="scss">
.page-tabbar {
  :deep(.wd-tabbar) {
    margin-bottom: 20px;
    background: transparent !important;
    backdrop-filter: blur(30rpx) brightness(96%);
  }
  :deep(.wd-tabbar__placeholder) {
    height: calc(50px + 40px + env(safe-area-inset-bottom)) !important;
  }
}
</style>